<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-02 09:04:08
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution fixtureReport">
        <el-dialog title="" :visible.sync="showDetail" width="650px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ '上传报告' }}</span>
                <div style="padding: 40px;">
                    <div style="display: flex">
                        <div style="margin-right: 10px;">
                            <img src="@/assets/icon/保养管理-工装.png" alt="">
                        </div>
                        <div
                            style="text-align: left;display: flex;flex-direction: column;justify-content: space-between;padding: 5px 0px;">
                            <div style="color: #000;font-size: 28px;">
                                {{ formInline.type }}
                            </div>
                            <div style="color: #9B9B9B;font-size: 14px;">

                                <span style="margin-right: 10px;">
                                    产品型号: {{ formInline.model }}
                                </span>
                                <span style="margin-right: 10px;">
                                    使用部门: {{ formInline.userDepar }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex;justify-content: space-between;color: #1B1B1B;">
                        <div>
                            生产时间:{{ formInline.proTime }}
                        </div>
                        <div>
                            使用年限:{{ formInline.life }}
                        </div>
                        <div>
                            备注:{{ formInline.remark }}
                        </div>
                    </div>
                    <div style="max-height: 300px;overflow:auto">
                        <el-upload ref="upload" class="upload-demo" :headers="headers"
                            :action="this.$http + '/mold/ledger-file/upload'" :on-success="handleSuccess"
                            :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                            <div slot="file" slot-scope="{file}">
                                <div class="el-upload-list__item-thumbnail ">
                                    <span> <img src="@/assets/icon/文件.png" alt=""
                                            style="vertical-align: middle;margin-right: 10px;"></span>
                                </div>
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-name" style="width:50%">{{ file.name }}</span>
                                    <span @click="deleteRemove(file)">
                                        <i class="el-icon-close"></i>
                                    </span>

                                </span>
                            </div>
                        </el-upload>
                    </div>

                    <div>
                        <img style="width: 100%;cursor: pointer;margin-top: 20px;" @click="clickUpload"
                            src="@/assets/按钮/上传附件.png" alt="">
                    </div>

                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import Cookies from 'js-cookie';
export default {
    props: {
        showDetail: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
    },
    data() {
        return {
            headers: {},
            formInline: {
                genre: 1,
                moldLedgerFileList: []
            },
            fileList: [],
            headers: {},
        }
    },
    mounted() {
        // 上传请求头
        this.headers[Cookies.get('tokenNameEqu')] = Cookies.get('tokenValueEqu');
        this.$baseRequestGetParams('/mold/frock/getInfo', { id: this.id, genre: 1 }, {}, 'get').then(res => {

            this.formInline = res.data;
            this.fileList = this.formInline.moldLedgerFileList.map(item => { // 按插件回显格式再次处理 pdf文件添加自定义封面
                item.name = item.fileName;
                delete item.status;
                return item
            });

        })
    },
    methods: {
        /**
        * @description: 文件移除后回调
        * @param {*} file
        * @param {*} fileList
        * @return {*}
        */
        handleRemove(file, fileList) {
            this.formInline.moldLedgerFileList = [];
            fileList.forEach(item => {
                if (item.response) {
                    this.formInline.moldLedgerFileList.push(this._.omitBy(item.response.data, (v) => _.isUndefined(v) || _.isNull(v) || v === ''))
                } else {
                    this.formInline.moldLedgerFileList.push({
                        fileName: item.fileName,
                        filePath: item.filePath,
                        fileSize: item.fileSize,
                        fileType: item.fileType,
                        id: item.id,
                        genre: item.genre
                    })
                }

            })
        },
        /**
         * @description: 文件上传成功后回调
         * @param {*} file
         * @return {*}
         */
        handleSuccess(file) {

            this.formInline.moldLedgerFileList.push(this._.omitBy(file.data, (v) => _.isUndefined(v) || _.isNull(v) || v === ''))
        },

        /**
         * @description: 文件移除
         * @param {*} file
         * @return {*}
         */
        deleteRemove(file) {
            this.$refs.upload.handleRemove(file);
        },
        clickUpload() {
            document.querySelector(" .el-upload").click()
        },

        handleClose(done) {
            this.$emit('closeDetail')
        },
        save() {

            this.formInline.moldLedgerFileList = this.formInline.moldLedgerFileList.map(item => {
                let arr = {
                    fileName: item.fileName,
                    filePath: item.filePath,
                    fileSize: item.fileSize,
                    fileType: item.fileType,
                }
                if (item.id) {
                    arr.id = item.id;
                    arr.genre = item.genre;
                }
                return arr
            })
            this.formInline.genre = 1;
            this.$baseRequest('/mold/frock/revise', this.formInline, {}, 'put').then(res => {
                this.$message.success('上传成功');
                this.$emit('closeDetail', 'isFresh')
            })

        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}

.fixtureReport .el-upload-list--picture .el-upload-list__item-thumbnail {
    height: 40px;
    line-height: 40px;
    background-color: #F8F8FB;
    width: 50px;
    margin-left: 20px;
}

.fixtureReport .el-upload-list--picture .el-upload-list__item {
    background-color: #F8F8FB;
    height: 67px;
    line-height: 67px;
    padding-left: 0px;
    width: 100%;
    border: none;
}

.fixtureReport .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
    line-height: 44px;
    text-align: left;
}
</style>
<style lang="scss" scoped>
.file-list-style {
    text-align: left;
    background-color: #F8F8FB;
    padding: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1B1B1B;

}

.downFile-box {
    position: absolute;
    right: 20px;
    top: 35%;
    color: #5CD8DA;
    cursor: pointer;
}

.file-list-styles {
    background-color: #E0EFFC;
    border-radius: 5px;
    text-align: center;
    line-height: 70px;
    font-size: 18px;
}
</style>
  